<template>
	<view>
		<view class="page hearder _flex _justify_between align-items_center">
			<view id="topsss" class="_flex"  @click="queryCity">
				<text style="font-size: 30rpx;
color: #2C2C2C;
letter-spacing: 2.55px;
text-align: center;">当前城市 &nbsp&nbsp{{city}}</text>
				<!-- <u-icon style="margin-left: 5rpx;" size="20" name="arrow-down"></u-icon> -->
				<image src="../../static/sanjiao.png" mode="" class="sanjiao"></image>
			</view>
			<!-- <view class="" style="width: 70%;">
				<u-tabs :list="tabList" font-size="35" active-color="#002B56" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
			</view> -->

		</view>
		<view class="" v-if="current=='0'">
			<view class="sortBox _flex align-items_center _justify_between">
				<u-dropdown ref="uDropdown" @open="open" active-color="#0e2a55" duration='0' menu-icon='arrow-down-fill' menu-icon-size='13'>
					<u-dropdown-item v-model="searchData.orderString" :title="form.typeSort" :options="sortList" @change="changeOrderString"></u-dropdown-item>
					<u-dropdown-item title="品牌"></u-dropdown-item>
					<u-dropdown-item v-model="searchData.sellingPrice" :title="form.priceSort" :options="priceList" @change="changeSellingPrice"></u-dropdown-item>
					<u-dropdown-item title="筛选"></u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="dropdown-item" v-if="carSelected.length>0">
				<view class="select_item" v-for="(item,index) in carSelected" :key="index" v-if="item.label"  @click="closeSelected(index,item.id)">
					{{item.label}}
					<u-icon size="20" name="close"></u-icon>
				</view>
			</view>
			<view class="page" v-if="dataList.length > 0">
				<view class="" v-for="(item,index) in dataList" :key="index">
					<view class="tab-list-li">
						<navigator :url="`/pages/carInfo/carInfo?item=${encodeURIComponent(JSON.stringify(item))}`" hover-class="none">
							<tab-item :item="item"></tab-item>
						</navigator>
					</view>
				</view>
                <view class="" style="padding: 30rpx 0;">
                	<u-loadmore :status="status" :load-text="loadText" />
                </view>
				
			</view>
			<null :iconSize="160" :textSize="28" v-else></null>
		</view>
		<!-- 新车 -->
		<view class="" v-if="current=='1'">
			<newCarSearch :hotBrandList="hotBrandList"></newCarSearch>
			<newCarList @fund="secrollTap" :scrollTop="scrollTop" :isIndexShow="isIndexShow"  :indexList="indexList"></newCarList>
			<block v-for="(item,index) in newCarList" :key="index" :index="index" :id="item.letter">
				<newCarItem :brandList="item.brandList"></newCarItem>
			</block>
		</view>
	</view>
</template>

<script>
	import API from "@/api/buycar.js"
	import app from "../../App.vue"
	export default {
		name: 'buyCar',
		data() {
			return {
				hotBrandList:[],
				newCarList:[],
				indexList:[],
				checkJson:null,
				searchData: { //筛选的数据
					sellingPriceUp: "", //售价 前区间
					sellingPriceDown: "", //售价 后区间
					orderString: "", //排序字段 由下面二手车排序接口获得
					cityId: getApp().globalData.cityId,
					page: 1,
					limit: 10,
					mileageUp: "", //行驶里程 前区间
					mileageDown: "",
					cheLingUp: "",
					cheLingDown: "",
					seatsNumUp: "", //座位数 前区间
					seatsNumDown: "", //座位数 后区间
					numberOfTransfersUp: "", //过户次数 前区间
					numberOfTransfersDown: "", //过户次数 后区间
					rechargeMileageUp: "", //续航里程KW 前区间
					rechargeMileageDown: "", // 续航里程KW 后区间
					vehicleStructure: "", //车辆结构
					batteryType: "",
					sellingPrice: "",
					modelId: "", //车型id
					seriesId: "",
					brandId: "",
					seriesName:"",
					brandName:""
				},

				count: 0,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				list: 1,
				page: 1,
				limit: 10,
				seriesId: '',
				carSelected: [

				],
				pickerValueDefault: [0, 0],
				city: '',
				cityId: '',
				treeData: [],
				sortList: [],
				sotrType: "",

				form: {
					typeSort: "默认排序",
					priceSort: "价格"
				},
				// cityShow: false,
				tabList: [{
						name: '二手车'
					}, 
					{
						name: '新车'
					}
					// , 
					// {
					// 	name: "商用车"
					// },
				],
				active: 0, //tab栏
				newTabList: [{
						name: "特价新车",
					},
					{
						name: "浏览历史",
					},
				],
				current: 0,
				locationName: "",

				modelList: [],
				dataList: [], //二手车数据列表
				newLogoList: [],
				scrollTop: 0,
				isIndexShow: false,
				typeySortShow: false,
				priceList: [{
						value: '1',
						label: '不限',
						sellingPriceUp: "", //售价 前区间
						sellingPriceDown: "", //售价 后区间
					},
					{
						value: '2',
						label: '3万以下',
						sellingPriceUp: 0,
						sellingPriceDown: 3
					},
					{
						value: '3',
						label: '3-5万',
						sellingPriceUp: 3,
						sellingPriceDown: 5
					},
					{
						value: '4',
						label: '5-10万',
						sellingPriceUp: 5,
						sellingPriceDown: 10
					},
					{
						value: '5',
						label: '10-15万',
						sellingPriceUp: 10,
						sellingPriceDown: 15
					},
					{
						value: '6',
						label: '15-20万',
						sellingPriceUp: 15,
						sellingPriceDown: 20
					},
					{
						value: '7',
						label: '20-30万',
						sellingPriceUp: 20,
						sellingPriceDown: 30
					},
					{
						value: '8',
						label: '30-40万',
						sellingPriceUp: 30,
						sellingPriceDown: 40
					},
					{
						value: '9',
						label: '40万以上',
						sellingPriceUp: 40,
						sellingPriceDown: ""
					},
				],
				listNew:{
					brandId:'',
					seriesId:'',
					name:""
				}
				
			};
		},
		onLoad(options) {
			//从搜索过来
			if(options.name){
				this.listNew.brandId = options.brandId,
				this.listNew.name = options.name,
				this.listNew.seriesId = options.seriesId
				this.type = true
			}
			//  从同价位，同车系进来的时候执行
			var that = this
			if (options.platformEstimatedPriceDown) {
				that.searchData.sellingPriceUp = options.platformEstimatedPriceUp;
				that.searchData.sellingPriceDown = options.platformEstimatedPriceDown;
			}
			if (options.seriesId) {
				that.seriesId = options.seriesId;
				that.searchData.seriesId = options.modelName;
				that.searchData.seriesName = options.seriesName;
				that.searchData.seriesId = options.seriesId;
			}
			if (options.current) {
				that.current = options.current;

			}
		},
		onPageScroll(e) {
			if(e.scrollTop >=262){
				this.isIndexShow = true
			}else{
				this.isIndexShow = false
			}
			this.scrollTop = e.scrollTop;
		},
		onShow(options) {
			console.log(12)
			let that = this
			that.city = getApp().globalData.cityName
			that.cityId = getApp().globalData.cityId
			that.searchData.cityId = getApp().globalData.cityId
			that.treeData = getApp().globalData.treeData
		
			// console.log(getApp().globalData);
			
			const json = getApp().globalData.carType
			if (json) { //将app中选中的车辆信息带回来
		
				that.searchData.seriesName = json.seriesName ? json.seriesName : "";
				that.searchData.brandName = json.brandName ? json.brandName :"";
				that.searchData.seriesId = json.seriesId ? json.seriesId : "";
				that.searchData.brandId = json.brandId ? json.brandId : "";
				app.globalData.carType = "" //清空app中的值
			}
			
			if(this.type ==true){
				that.searchData.brandName = this.listNew.name;
				that.searchData.seriesId = this.listNew.seriesId;
				that.searchData.brandId = this.listNew.brandId;
			}
		
			uni.$on('checkJson', function(data) {
				console.log('携带参数为：', data);
				that.checkJson = {...data}
				for (let key in data) {
					if (data[key] == null) {
						data[key] = ""
					}
				}
		        // that.searchData.brandId = data.brandId ?data.brandId : "";
				that.searchData.vehicleStructure = data.vehicleStructure ? data.vehicleStructure.value : '';
				that.searchData.vehicleStructureData = data.vehicleStructure ? data.vehicleStructure : '';
				that.searchData.batteryType = data.dianchi ? data.dianchi.value : '';
				that.searchData.batteryTypeData = data.dianchi ? data.dianchi : '';
				that.searchData.numberOfTransfersUp = data.guohu ? data.guohu.numberOfTransfersUp : ""; //过户次数 前区间
				that.searchData.numberOfTransfersDown = data.guohu ? data.guohu.numberOfTransfersDown : "";
				that.searchData.mileageDown = data.maxLichen;
				that.searchData.mileageUp = data.minLichen;
				that.searchData.cheLingUp = data.minYear;
				that.searchData.cheLingDown = data.maxYear;
				that.searchData.seatsNumUp = data.zuowei ? data.zuowei.seatsNumUp : ""; //过户次数 前区间
				that.searchData.seatsNumDown = data.zuowei ? data.zuowei.seatsNumDown : "";
				// that.searchData.modelId = data.modelId;
				// that.searchData.seriesId = data.seriesId;
				
				that.searchData.rechargeMileageUp = data.xuhang ? data.xuhang.rechargeMileageUp : "";
				that.searchData.rechargeMileageDown = data.xuhang ? data.xuhang.rechargeMileageDown : "";
				that.searchData.sellingPriceDown = data.maxPrice;
				that.searchData.sellingPriceUp = data.minPrice;
				// that.searchData.modelName = data.modelName;
				
				that.searchData.guohu =  data.guohu;
				that.searchData.xuhang =  data.xuhang;
				that.searchData.zuowei =  data.zuowei;
				
			})
			
			that.getOrderList(); //二手选车排序
		    that.getSelectedData(); //自定义 获取选中的数据
			that.getCarList();
			
			
		},
		
		onReachBottom() {
			if(this.current == 0){
				uni.showLoading({
					title: this.status,
				});
				this.status = 'loading';
				this.searchData.page = this.searchData.page + 1;
				
					API.getCarList(this.searchData).then(res => {
						this.dataList = this.dataList.concat(res.data)
						// console.log(this.dataList);
						
						this.count = res.count
					})
					if (this.searchData.page * this.searchData.limit >= this.count) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
			}
			
		},
		// onPageScroll(e) {
		// 	console.log("e");
		// 	console.log(e);
		// 			// this.scrollTop = e.scrollTop;
		// 		},
		methods: {
			getNewCarList(){
				API.getNewCarList().then(res=>{
					this.newCarList = res.data
					this.indexList = this.newCarList.map(val => {
						return val.letter;
				 })
				 // console.log("543543")
				 // console.log(this.newCarList)
				 // console.log(this.indexList)
				})
				
			},
			secrollTap(data){
				uni.pageScrollTo({
					selector: '#'+data
				})
			},
			queryCity(){
				uni.navigateTo({
					url:'/pagesB/city/city'
				})
			},
			getSelectedData(){
				var ghcs = null;
				if(this.searchData.numberOfTransfersDown && this.searchData.numberOfTransfersUp){
					ghcs  = "过户" + this.searchData.numberOfTransfersDown +"次"
				}
				else if(this.searchData.numberOfTransfersUp && !this.searchData.numberOfTransfersDown){
					ghcs ="过户4次以上"
				}
				else{
					ghcs =""
				}
		        var price = null
				if(!this.searchData.sellingPriceDown && this.searchData.sellingPriceUp !=0 ){
					 price = this.searchData.sellingPriceUp + "万以上"
					  this.form.priceSort = "价格"
				}
				else if(!this.searchData.sellingPriceDown && this.searchData.sellingPriceUp ==0 ){
					 price = ""
				}
				else if(this.searchData.sellingPriceDown && !this.searchData.sellingPriceUp ){
					 price = this.searchData.sellingPriceDown +"万以内"
				}
				else{
					price = this.searchData.sellingPriceUp + '万-' + this.searchData.sellingPriceDown + '万'
					 this.form.priceSort = "价格"
				}
				var cheling = null
				if(!this.searchData.cheLingDown && this.searchData.cheLingUp == 0){
					 cheling = ""
				}
				else if(!this.searchData.cheLingDown && this.searchData.cheLingUp != 0){
					 cheling = this.searchData.cheLingUp + "年以上"
				}
				else{
					cheling = this.searchData.cheLingUp + '年-' + this.searchData.cheLingDown +'年'
				}
				
				var licheng = null
				if(!this.searchData.mileageDown && this.searchData.mileageUp == 0){
					 licheng = ""
				}
				else if(!this.searchData.mileageDown && this.searchData.mileageUp != 0){
					 licheng = this.searchData.mileageUp + "万公里以上"
				}
				else{
					licheng = this.searchData.mileageUp + '万公里-' + this.searchData.mileageDown +'万公里'
				}
				
				var rechargeMileag = null
				if(this.searchData.rechargeMileageDown && !this.searchData.rechargeMileageUp){
					 rechargeMileag = this.searchData.rechargeMileageDown + "km以内"
				}
				else if(this.searchData.rechargeMileageDown && this.searchData.rechargeMileageUp){
					 rechargeMileag =this.searchData.rechargeMileageUp + 'km-' + this.searchData.rechargeMileageDown +'km'
				}
				else if(!this.searchData.rechargeMileageDown && this.searchData.rechargeMileageUp){
					 rechargeMileag =this.searchData.rechargeMileageUp + 'km以上' 
				}
				else{
					rechargeMileag = ""
				}
				
				var seatsNum = null 
				if(this.searchData.seatsNumUp && this.searchData.seatsNumDown){
					 seatsNum = this.searchData.seatsNumUp + "座"
				}
				else if(this.searchData.seatsNumUp == 7 && !this.searchData.seatsNumDown){
					seatsNum = this.searchData.seatsNumUp + '座以上'
				}
				else{
					seatsNum = ""
				}
				
				
			   this.carSelected=[
				   {
					 selectedName:'品牌:',
					 label:this.searchData.brandName,
					 id:"brandId"
				   },
				   {
					 selectedName:'车系:',
					 label:this.searchData.seriesName,
					 id:"seriesId"
				   },
				   {
					 selectedName:'车价:',
					 label:price,
					 id:"sellingPrice"
				   },
				   {
					 selectedName:'车身结构:',
					 label:this.searchData.vehicleStructure,
					 id:"vehicleStructure"
				   },
				   {
					 selectedName:'座位数:',
					 label:seatsNum,
					 id:"seatsNum"
					 
				   },
				   {
					 selectedName:'车龄:',
					 label:cheling,
					 id:'cheLing'
				   },
				   {
					 selectedName:'里程:',
					 label:licheng,
					 id:"mileage"
					 
				   },
				   
				   {
					 selectedName:'过户次数',
					 label:ghcs,
					 id:"numberOfTransfer"
				   },
				   {
					 selectedName:'续航里程:',
					 label:rechargeMileag,
					 id:"rechargeMileage"
				   },
				   {
					 selectedName:'电池类型:',
					 label:this.searchData.batteryType,
					 id:"batteryType"
				   }
				   
			   ]
			   // console.log("xuanze");
			   // console.log(this.carSelected);
			},
			open(index) { 
				this.type = false
				if (index == 1) {
					this.$refs.uDropdown.close();
					uni.navigateTo({
						url: "../selectCar/selectCarBuyCar"
					})
				} else if (index == 3) {
					this.$refs.uDropdown.close();
					//价格选中区间
					if(this.searchData.sellingPriceUp && this.searchData.sellingPriceDown){
						this.searchData.priceValues=[this.searchData.sellingPriceUp,this.searchData.sellingPriceDown]
					}
					else if(this.searchData.sellingPriceUp && !this.searchData.sellingPriceDown){
					this.searchData.priceValues=[this.searchData.sellingPriceUp,50]
					}
					else if(!this.searchData.sellingPriceUp && this.searchData.sellingPriceDown){
					this.searchData.priceValues=[0,this.searchData.sellingPriceDown]
					}
					else{
						this.searchData.priceValues = [0,50]
					}
					
					
					//车龄区间
					if(this.searchData.cheLingUp && this.searchData.cheLingDown){
						this.searchData.cheLingValues=[this.searchData.cheLingUp,this.searchData.cheLingDown]
					}
					else if(this.searchData.cheLingUp && !this.searchData.cheLingDown){
					this.searchData.cheLingValues=[this.searchData.cheLingUp,10]
					}
					else if(!this.searchData.cheLingUp && this.searchData.cheLingDown){
					this.searchData.cheLingValues=[0,this.searchData.cheLingDown]
					}
					else{
						this.searchData.cheLingValues = [0,10]
					}
					
					
					//里程区间
					if(this.searchData.mileageUp && this.searchData.mileageDown){
						this.searchData.mileageValues=[this.searchData.mileageUp,this.searchData.mileageDown]
					}
					else if(this.searchData.mileageUp && !this.searchData.mileageDown){
					this.searchData.mileageValues=[this.searchData.mileageUp,14]
					}
					else if(!this.searchData.mileageUp && this.searchData.mileageDown){
					this.searchData.mileageValues=[0,this.searchData.mileageDown]
					}
					else{
						this.searchData.mileageValues = [0,14]
					}
					
					
					// console.log("跳转时候的数据");
					// console.log(this.searchData);
					uni.navigateTo({
						url:  `./filtrate?data=${encodeURIComponent(JSON.stringify(this.searchData))}`
					})
				}
			},
			// 获取车辆列表
			getCarList() {
				// console.log(this.searchData);
				this.searchData.page = 1;
				API.getCarList(this.searchData).then(res => {
					
					console.log(res)
					this.dataList = res.data
					this.count = res.count
					for (let i=0;i<res.data.length;i++){
						// console.log(res.data[i].carRegistrationTime.substring(0,10))
						this.dataList[i].carRegistrationTime = res.data[i].carRegistrationTime.substring(0,10)
					
					}
				})
				if (this.searchData.page * this.searchData.limit >= this.count) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
			},


			closeSelected(index,id) {
				console.log(index,);
				if(id == 'brandId'){
					this.searchData.seriesId = "";
					this.searchData.seriesName = "";
					this.searchData.brandId = "";
					
					this.searchData.brandName = "";
					if(this.checkJson){
						this.checkJson.brandId="";
						this.checkJson.seriesId="";
						this.checkJson.modelName="";
					}
					this.carSelected[1].label=""
				}
				if(id == 'seriesId'){
					this.searchData.seriesId = "";
					this.searchData.seriesName = "";
					this.carSelected[1].label=""
				}
				if(id == 'sellingPrice'){
					this.searchData.sellingPriceUp = "";
					this.searchData.sellingPriceDown = "";
				}
				if(id == 'vehicleStructure'){
					this.searchData.vehicleStructure = "";
					this.searchData.vehicleStructureData = ""
				}
				if(id == 'seatsNum'){
					this.searchData.seatsNumUp = "";
					this.searchData.seatsNumDown = "";
					this.searchData.zuowei =  "";
					
				}
				if(id == 'cheLing'){
					this.searchData.cheLingUp = "";
					this.searchData.cheLingDown = "";
				}
				if(id == 'mileage'){
					this.searchData.mileageUp = "";
					this.searchData.mileageDown = "";
				}
				if(id == 'numberOfTransfer'){
					this.searchData.numberOfTransfersUp = "";
					this.searchData.numberOfTransfersDown = "";
					
					this.searchData.guohu =  "";


				}
				if(id == 'rechargeMileage'){
					this.searchData.rechargeMileageUp = "";
					this.searchData.rechargeMileageDown = "";
					this.searchData.xuhang =  "";
				}
				if(id == 'batteryType'){
					this.searchData.batteryType = "";
					this.searchData.batteryTypeData = "";
				}
				this.carSelected[index].label=""
				this.getCarList();
			},
			getOrderList() { //默认排序下拉数据
				API.getOrderList().then(res => {
					this.sortList = res.data
				})
			},
			changeOrderString(e) {
				console.log(e);
				var orderStringObj = this.sortList.find((val, index) => {
					return (val.value == e);
				});
				this.form.typeSort = orderStringObj.label;
				this.searchData.orderString = e;
				this.getCarList();
			},
			changeSellingPrice(e) {
				console.log(e);
				var priceObj = this.priceList.find((val, index) => {
					return (val.value == e);
				});
				// this.form.priceSort = priceObj.label;
				console.log(priceObj);
				this.searchData.sellingPriceUp = priceObj.sellingPriceUp
				this.searchData.sellingPriceDown = priceObj.sellingPriceDown
				console.log(this.searchData);
				if(e==1){
					this.carSelected[2].label = "";
				}
				else{
					this.carSelected[2].label = priceObj.label;
				}
				this.getCarList();
			},

			// onConfirm(e) { //改变city的时候
			// 	this.city = e.secondPick.name;
			// 	this.cityId = e.secondPick.code;
			// 	this.searchData.cityId = e.secondPick.code;
			// 	getApp().globalData.cityId = this.cityId 
			// 	getApp().globalData.cityName =this.city
			// 	this.getCarList();
			// },


			// 价格排序
			priceConfirm(e) {
				console.log(e)
				this.form.priceSort = e[0].label
				var index = this.priceList.findIndex((v) => {
					return v.label == e[0].label;
				});
				console.log(index);
				this.searchData.sellingPriceUp = this.priceList[index].sellingPriceUp
				this.searchData.sellingPriceDown = this.priceList[index].sellingPriceDown
				console.log(this.searchData);
				this.getCarList();

			},
			// 排行榜
			rankingList(e) {
				console.log(e)
				uni.navigateTo({
					url: "../rankingList/rankingList?active=" + e
				})
			},
			// 新车条件筛选-多选
			imgChecked(e) {
				let check = e.checked
				console.log(check)
				e.checked = !check
			},
			usedCarDetail(e) {
				uni.navigateTo({
					url: "./usedCarDetail"
				})
			},
			newCarDetail(e) {
				uni.navigateTo({
					url: "./newCarDetail"
				})
			},
			tabChange(index) {
				this.current = index;
				if (this.current == 0) {
					this.getCarList()
				} else if (this.current == 1) {
					this.getNewCarList()
					this.getHotBrand();
				}
			},
			search() {
				uni.navigateTo({
					url: "../index/search"
				})
			},
			pinpai() {
				uni.navigateTo({
					url: "../selectCar/selectCarBuyCar"
				})
			},

			tabNewChange(idx) {
				this.active = idx
			},
			
			
			
			getHotBrand(){//新车热门品牌
				API.getHotBrand().then(res=>{
					this.hotBrandList = res.data
					console.log(this.hotBrandList)
				})
			}
			
		}
	};
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style scoped>
	.sanjiao{
		    width: 10rpx;
		    height: 8rpx;
		    margin-left: 10rpx;
			margin-top: 45rpx;
	}
	#topsss{
		height: 100rpx;
		line-height: 100rpx;
		width: 100%;
		border-bottom: 1rpx solid #d8d8d8;
	}
	.hearder {
		text-align: center;
		margin-top: 0;
		color: #888;
		font-size: 30rpx;
	}

	.sortBox {
		/* 		background: #FBF8F9; */
		color: #888;
		height: 75rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.head_inputBox {
		padding: 0 24rpx;
		margin: 30rpx;
		border: 1px solid #002B56;
		border-radius: 17rpx;
	}

	.news-wrap {
		margin-left: 20rpx;
		line-height: 45rpx;
		color: #333333;
	}

	.newsTxt {
		width: 340rpx;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tips {
		width: 30rpx;
		height: 30rpx;
	}

	.newsTip {
		background: #F4E5C3;
		display: inline-block;
		padding: 0 8rpx;
		font-size: 22rpx;
		margin-right: 8rpx;
		border-radius: 10rpx;
	}

	.dataList {
		margin-top: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}


	.buyList .buyItem {
		width: 20%;
		color: #666666;
		text-align: center;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.i_tem {
		display: inline-block;
		padding: 10rpx 0;
		background: #F7F8FC;
		width: 18%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.tabBox {
		color: #002B56;
		align-items: flex-end;
	}

	.tabName {
		font-size: 30rpx;
		padding-bottom: 20rpx;
	}

	.tabBox .active {
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 2px solid #002B56;

	}

	.checkActive {
		background: #4472C4 !important;
		color: #fff !important;
		;
	}

	.modelBox {
		width: 100%;
		line-height: 40rpx;
		display: flex;
	}

	.modelBox .modelContext {
		width: 52%;
		margin-left: 3%;
	}

	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.dropdown-item {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		/* justify-content: space-between; */

	}

	.select_item {
		border: 1px solid #eee;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #666;
		padding: 0 20rpx;
		height: 60rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.select_item u-icon {
		margin-left: 10rpx;
	}

	.tab-list-li {
		border-bottom: 1px solid #efefef;
		padding: 20rpx 0;
	}

	.page {
		margin-bottom: 30rpx;
	}
</style>
